<template>
  <div class="cet6-form">
    <!-- 标题 -->
    <h2 class="title">六级报考表</h2>
    
    <div class="content">
      <el-alert
        v-for="(item, index) in tips"
        :key="index"
        :title="item.title"
        :type="item.type"
        :description="item.description"
        :closable="false"
        :center="true"
        show-icon
      ></el-alert>
    </div>
    <!-- 报名表单 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      
      <!-- 报名场次选择 -->
      <div class="form-item">
        <el-form-item label="报名场次" prop="location">
          <el-radio-group v-model="form.location" @change="getAvailableExams">
            <!-- 报名场次选项 -->
            <el-radio v-for="option in locationOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      
      <!-- 考试日期选择 -->
      <div class="form-item">
        <el-form-item label="考试日期" prop="exam_date">
          <el-select v-model="form.exam_date" filterable placeholder="请选择考试日期">
            <!-- 考试日期选项 -->
            <el-option v-for="date in examDateList" :key="date" :label="date" :value="date"></el-option>
          </el-select>
        </el-form-item>
      </div>


      <!-- 弹窗按钮 -->
      <div class="form-item">
        <el-form-item>
          <el-button type="primary" class="dialog-btn" @click="showDialog">提交报名</el-button>
        </el-form-item>
      </div>

    </el-form>
    
    <!-- 弹窗 -->
    <el-dialog title="个人信息确认" :visible.sync="dialogVisible" class="dialog">
      <p>请确认个人信息</p>
      <br/>
      <p>姓名：{{this.$store.state.name}}</p>
      <br/>
      <p>手机号码：{{this.$store.state.phone}}</p>
      <br/>
      <p>电子邮箱：{{this.$store.state.email}}</p>
      <br/>
      <p>性别：{{this.$store.state.gender}} </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      //弹窗
      dialogVisible: false,

      //注意事项
      tips: [
          {
            title: "先做好准备",
            type: "success",
            description:
              "在报名之前，您需要做好准备，包括准备好证件、支付报名费用、确定报名时间等。请确保您符合报名要求，并阅读相关报名须知。"
          },
          {
            title: "报名方式",
            type: "info",
            description:
              "六级考试的报名方式分为网上报名和现场报名两种。网上报名需要提前注册并在线填写报名信息，并在线支付报名费；现场报名则需要前往指定考点，携带相关证件以及报名费用进行现场登记。"
          },
          {
            title: "考试时间安排",
            type: "warning",
            description:
              "六级考试每年两次，分别在6月和12月进行。具体考试日期根据学校和考场的不同而有所不同。请提前查看考试时间，并规划好时间安排。"
          },
          {
            title: "考前准备",
            type: "danger",
            description:
              "在考试前，您需要做好充分准备，包括熟悉考试内容、了解考试形式、进行模拟练习等。请提前安排好学习计划，并认真复习。"
          }
        ],
      
      // 表单数据
      form: {
        id:'',
        location: '',
        exam_date: '',
      },
      // 报名场次选项
      locationOptions: [
        { label: '北京', value: 'beijing' },
        { label: '上海', value: 'shanghai' },
        { label: '广州', value: 'guangzhou' },
      ],
      // 可选考试日期列表
      examDateList: null,
      // 表单验证规则
      rules: {
        location: [{ required: true, message: '请选择报名场次', trigger: 'change' }],
        exam_date: [{ required: true, message: '请选择考试日期', trigger: 'change' }],
      },
      // 是否正在加载可选考试日期
      loading: false,
    };
  },
  methods: {
    // 获取可选考试日期
    getAvailableExams() {
      this.loading = true;
      setTimeout(() => {
        // 模拟获取可选考试日期的异步请求
        switch (this.form.location) {
          case 'beijing':
            this.examDateList = ['2022-01-08', '2022-03-12'];
            break;
          case 'shanghai':
            this.examDateList = ['2022-01-15', '2022-03-19'];
            break;
          case 'guangzhou':
            this.examDateList = ['2022-01-22', '2022-03-26'];
            break;
        }
        this.loading = false;
      }, 1000)
    },
    // 显示个人信息确认弹窗
    showDialog() {
      this.dialogVisible = true
    },

    // 提交表单数据
    handleSubmit() {
      this.dialogVisible = false;
      this.form.id=this.$store.state.id;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const that=this;
          axios
            .post("http://localhost:8084/signup", that.form)
            .then(function(resp){
              if(resp.data === 'success'){
                that.$message.success('报名成功');
                that.$router.push({ path: "/personal" });
              }
              else if(resp.data==="already"){
                that.$message.error('已经报名过该考试');
              }
              else{
                that.$message.error('报名失败');
              }
            });
          console.log(this.form);
        } else {
          that.$message.error('表单验证未通过，请检查填写内容');
        }
      });
    },
  },
};
</script>

<style scoped>
  /* 整体样式 */
  .cet6-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
  }

  /* 标题样式 */
  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }

  /* 注意事项*/
  .content {
  margin-top: 50px;
  } 

  /* 表单项样式 */
  .form-item {
    margin-bottom: 20px;
    text-align: center;
  }

  /* 提交按钮样式 */
  .submit-btn {
    width: 100px;
  }

  /* 弹窗按钮样式 */
  .dialog-btn {
    width: 120px;
  }

  /* 弹窗样式 */
  .dialog {
    text-align: center;
  }

  /* 弹窗底部按钮样式 */
  .dialog-footer {
    display: flex;
    justify-content: center;
  }
</style>
